import { Component, forwardRef, Input } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { ExpressionService } from '@core/services/expression/ExpressionService';

@Component({
  selector: 'apes-custom-card',
  template: `
    <div class="apes-custom-card"
         [ngClass]="{'click': !clickBody}"
         (click)="clickMain()">
      <div class="custom-card-icon">
        <i apes-icon [apesType]="showFormatter(icon,iconFormatter)"></i>
      </div>

      <ng-container *ngIf="!clickBody">
        <div class="custom-card-main">
          <div class="custom-card-title">{{showFormatter(title, titleFormatter)}}</div>
          <div class="custom-card-subhead">{{showFormatter(subhead, subheadFormatter)}}</div>
        </div>
      </ng-container>

      <ng-container *ngIf="clickBody">
        <div class="custom-card-main">
          <ng-content></ng-content>
        </div>
      </ng-container>

    </div>
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => ApesCustomCardComponent),
      multi: true,
    },
  ],
  styles: [`
  `],
})

export class ApesCustomCardComponent implements ControlValueAccessor {

  private value: any;
  icon: any;
  iconFormatter: any;
  title: any;
  titleFormatter: any;
  subhead: any;
  subheadFormatter: any;
  callback: any;


  @Input() ctx: any;
  @Input() params: any;
  @Input() clickBody: boolean = false;

  constructor(
    protected expressionService: ExpressionService,
  ) {
  }

  ngOnInit() {
    this.initParamsData();
  }

  initParamsData() {
    let params = this.params;
    this.icon = params.iconFormatter ? null : params.icon ? params.icon : 'file-text';
    this.iconFormatter = params.iconFormatter;
    this.title = params.titleFormatter ? null : params.title ? params.title : '标题';
    this.titleFormatter = params.titleFormatter;
    this.subhead = params.subheadFormatter ? null : params.subhead ? params.subhead : this.value;
    this.subheadFormatter = params.subheadFormatter;
    this.callback = params.callback ? params.callback : null;
    if (params.hasOwnProperty('clickBody')) {
      this.clickBody = true;
    }
  }

  clickMain() {
    if (this.clickBody) return;
    let callbackBody = this.callback;
    this.expressionService.evaluate(callbackBody, {
      context: this.ctx,
      model: this.ctx.model,
      value: this.value,
    }, true);
  }

  formatter(expression: string) {
    return this.expressionService.evaluate(expression, {
      context: this.ctx,
      model: this.ctx.model,
      value: this.value,
    });
  }

  showFormatter(key, formatter) {
    let show;
    if (key && !formatter) {
      show = key;
    } else {
      show = this.formatter(formatter);
    }
    return show;
  }

  writeValue(value: any): void {
    this.value = value;
  }

  registerOnChange(fn: any): void {
    this.controlChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.controlTouch = fn;
  }

  public controlChange: any = () => {
  };

  public controlTouch: any = () => {
  };

}
